import React, { useState } from 'react';
import { TextArea, Button } from 'antd-mobile';

function JournalInput({ onSubmit }) {
  const [content, setContent] = useState('');

  const handleSubmit = () => {
    if (!content.trim()) return;
    onSubmit(content);
    setContent('');
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  return (
    <div style={{
      background: '#fff',
      padding: '16px',
      borderRadius: '8px',
      boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
      width: '100%',
      boxSizing: 'border-box',
      overflowX: 'hidden'
    }}>
      <TextArea
        value={content}
        onChange={setContent}
        onKeyDown={handleKeyDown}
        placeholder="写下今天的想法... "
        rows={4}
        maxLength={512}
        style={{
          '--font-size': '15px',
          '--placeholder-color': '#999',
          padding: '12px',
          border: '1px solid #e5e5e5',
          borderRadius: '6px',
          marginBottom: '12px',
          width: '100%', // Ensure it doesn't exceed the screen width
          boxSizing: 'border-box' // Include padding and border in the width calculation
        }}
      />
      <div style={{
        display: 'flex',
        justifyContent: 'flex-end'
      }}>
        <Button
          color='primary'
          onClick={handleSubmit}
          style={{
            fontSize: '14px',
            padding: '4px 16px'
          }}
        >
          保存
        </Button>
      </div>
    </div>
  );
}

export default JournalInput;